<template>
    <ul>
        <li :style="{opacity}">欢迎学习Vue</li>
        <li>news001 <input type="text"></li>
        <li>news002 <input type="text"></li>
        <li>news003 <input type="text"></li>
    </ul>
</template>

<script>
    export default {
        name: 'News',
        data() {
            return {
                opacity: 1,
            }
        },
        // 这种生命周期钩子会存在如果关闭路由缓存的话，是可以生效的，但是如果开启路由缓存的话，不能生效停止打印@
        // mounted() {
        //     this.timer = setInterval(() => {
        //         console.log('@');
        //         this.opacity -= 0.01;
        //         if (this.opacity <= 0) {
        //             this.opacity = 1;
        //         }
        //     }, 16);
        // },
        // beforeDestroy() {
        //     console.log('News组件即将被销毁了！');
        //     clearInterval(this.timer);
        // },

        // 两个新的生命周期钩子，是路由组件独有的。
        // 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
        // 具体名字：activated、deactivated
        // 1. activated 路由组件被激活时触发。
        // 2. deactivated 路由组件失活时触发。
        activated() {
            console.log('News组件被激活 激活 激活了！');

            this.timer = setInterval(() => {
                console.log('@');
                this.opacity -= 0.01;
                if (this.opacity <= 0) {
                    this.opacity = 1;
                }
            }, 16);
        },
        deactivated() {
            console.log('News组件被失活 失活 失活了！');

            console.log('News组件即将被销毁了！');
            clearInterval(this.timer);
        },

    }   
</script>

<style lang="css">

</style>